<template>
  <div id="safe-echarts3" style="width: 100%; height: 100%; pointer-events: all"></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.getData();
  },
  created() {},
  methods: {
    // 获取数据
    getData() {
      this.$get("/safetyproduction/getBusiness").then((res) => {
        this.renderEcharts(res.data);
      });
    },
    // 渲染柱形图
    renderEcharts(data) {
      let myChart = this.$echarts.init(document.getElementById('safe-echarts3'))

      let arr_name = []
      data.map((item) => {
        arr_name.push(item.name.indexOf("安全生产") !== -1 ? item.name.substring(4, item.name.length) : item.name);
      });

      let topColor = ["#00fff5", "#ffcc00", "#b9b7ff", "#7dea97"] // 圆柱顶部颜色
      const commonConfigSeries1 = (index) => {
        return {
          symbolPosition: "end",
          itemStyle: {
            normal: {
              color: topColor[index],
            }
          }
        }
      }
      let seriesData1 = data.map((item, index) => ({ ...item, ...commonConfigSeries1(index) }))

      let bottomColor = ["#43bafe", "#ff7800", "#e9a5ff", "#7dea97"] // 圆柱底部颜色
      const commonConfigSeries2 = (index) => {
        return {
          itemStyle: {
            normal: {
              color: bottomColor[index],
            }
          }
        }
      }
      let seriesData2 = data.map((item, index) => ({ ...item, ...commonConfigSeries2(index) }))

      let bottomInsideColor = ["#43bafe", "#ff7800", "#e9a5ff", "#7dea97"] // 底部内圆圈颜色
      const commonConfigSeries3 = (index) => {
        return {
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: bottomInsideColor[index], 
              borderWidth: 5,
            }
          }
        }
      }
      let seriesData3 = data.map((item, index) => ({ ...item, ...commonConfigSeries3(index) }))

      let bottomOutColor = ["#43bafe", "#ff7800", "#e9a5ff", "#7dea97"] // 底部外圆圈颜色
      const commonConfigSeries4 = (index) => {
        return {
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: bottomOutColor[index], 
              borderWidth: 5,
              borderType: "dashed"
            }
          }
        }
      }
      let seriesData4 = data.map((item, index) => ({ ...item, ...commonConfigSeries4(index) }))

      let mainColor = ["#00fff5", "#ffcc00", "#b9b7ff", "#7dea97"] // 柱子对应数值颜色
      let jianbianColor = [
        { "offset0": "rgba(0,255,245,0.5)", "offset1": "#43bafe" },
        { "offset0": "rgba(255,204,0,0.5)", "offset1": "#ff7800" },
        { "offset0": "rgba(185,183,255,0.5)", "offset1": "#e9a5ff" },
        { "offset0": "#449056", "offset1": "#7dea97" }
      ]
      const commonConfigSeries5 = (index) => {
        return {
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 15,
              textStyle: {
                color: mainColor[index], // 柱子对应数值颜色
                fontSize: 16
              }
            }
          },
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [ // 底部渐变颜色
                  { offset: 0, color: jianbianColor[index].offset0 },
                  { offset: 1, color: jianbianColor[index].offset1 }
                ]
              }
            }
          }
        }
      }
      let seriesData5 = data.map((item, index) => ({ ...item, ...commonConfigSeries5(index) }))
      
      let option = {
        grid: {
          left: "3%",
          right: "3%",
          top: "17%",
          bottom: "30%",
        },
        tooltip: {},
        xAxis: {
          data: arr_name,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
            margin: 35, // 刻度标签与轴线之间的距离。
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "圆柱顶部颜色",
            type: "pictorialBar",
            symbolSize: [30, 10],
            symbolOffset: [0, -5],
            z: 12,
            data: seriesData1
          },
          {
            name: "圆柱底部颜色",
            type: "pictorialBar",
            symbolSize: [30, 10],
            symbolOffset: [0, 5],
            z: 12,
            data: seriesData2
          },
          {
            name: "底部内圆圈颜色",
            type: "pictorialBar",
            symbolSize: [50, 25],
            symbolOffset: [0, 15],
            z: 11,
            data: seriesData3
          },
          {
            name: "底部外圆圈颜色",
            type: "pictorialBar",
            symbolSize: [75, 40],
            symbolOffset: [0, 23],
            z: 10,
            data: seriesData4
          },
          {
            type: "bar",
            silent: true,
            barWidth: 30,
            barGap: "-100%",
            data: seriesData5
          }
        ]
      };
      myChart.setOption(option);
    },
  },
};
</script>
